import React from 'react';
// 自己封装的地区组件
import AreaPicker from '@/components/Area/AreaPicker'

export default () =>
{
    // 创建表单的对象结构
    const [form] = React.UI.Form.useForm()

    //初始化表单数据
    let [business, SetBusiness] = useState({
        ...React.business,
        active: [React.business.province, React.business.city, React.business.district],
        code: React.business.district || React.business.city || React.business.province
    })

    // 个人头像
    let [avatar, SetAvatar] = useState([{
        url: business.avatar_text
    }])

    //头像上传
    const UploadAvatar = async (file: any) =>
    {
        //将图片覆盖到business对象上
        SetBusiness({
            ...business,
            avatar: file
        })

        //返回一个本地的地址给到组件预览
        return {
            url: URL.createObjectURL(file)
        }
    }

    //地区显示
    const [AreaShow, SetAreaShow] = useState(false)

    //地区确认
    const AreaConfirm = (val: any[], list:any[]) => 
    {
        //弹出框隐藏
        SetAreaShow(false)

        var code = ''
        var region_text = ''

        for(var item of val)
        {
            if(item) code = item
        }

        if(list[0]) region_text += `${list[0]}`
        if(list[1]) region_text += `/${list[1]}`
        if(list[2]) region_text += `/${list[2]}`

        // 修改表单数据
        form.setFieldsValue({
            region_text: region_text,
            code: code
        })
    }

    // 表单提交
    const submit = async (values:(object | any)) => 
    {
        //组装数据
        values.id = business.id

        //判断是否有上传图片
        if(business.avatar) values.avatar = business.avatar

        //获取到选择的地区码
        if(form.getFieldValue('code')) values.code = form.getFieldValue('code')

        //判断是否有输入密码，如果没有就删除
        if(!values.password) delete values.password
        
        //发起请求
        let result = await React.request.upload('/business/UserProfile', values)

        if(result.code == 0)
        {
            React.toast(result.msg)
            return false
        }

        //更改资料成功的话
        React.toast(result.msg, () => {
            //覆盖cookie 让cookies 在根路径下面有效
            React.cookies.save('business', result.data, {path: '/'})

            //修改全局变量
            React.business = result.data

            //返回上一个界面
            React.navigate(-1)
        })
    }

    return (
        <>
            {/* 地区组件 */}
            <AreaPicker active={business.active} visible={AreaShow} onClose={() => SetAreaShow(false)} onConfirm={AreaConfirm} />

            <React.UI.Form
                name="profile"
                layout="horizontal"
                mode="card"
                form={form}
                initialValues={business}
                onFinish={submit}
                footer={<React.UI.Button block type='submit' color='primary' size='large'>提交修改</React.UI.Button>}
            >
                {/* 头像 */}
                <React.UI.AutoCenter style={{margin: '30px 0px'}}>
                    <React.UI.ImageUploader value={avatar} onChange={SetAvatar} maxCount={1} upload={UploadAvatar} />
                </React.UI.AutoCenter>

                <React.UI.Form.Item name="nickname" label="昵称" rules={[{required: true, message: '请输入昵称'}]}>
                    <React.UI.Input placeholder="请输入昵称" />
                </React.UI.Form.Item>

                <React.UI.Form.Item
                    name='mobile'
                    label="手机号码"
                    rules={[
                        {required: true, message: '请填写手机号码'},
                        {pattern: /^1[356789]\d{9}$/, message: '请输入正确格式的手机号码'}
                    ]}
                >
                    <React.UI.Input placeholder="请输入手机号码" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="password" label="密码">
                    <React.UI.Input type="password" placeholder="请输入密码" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="email" label="邮箱" rules={[{ required: true }, { pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不对' }]}>
                    <React.UI.Input placeholder="请输入邮箱" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
                    <React.UI.Radio.Group>
                        <React.UI.Space direction='horizontal'>
                            <React.UI.Radio value='0'>保密</React.UI.Radio>
                            <React.UI.Radio value='1'>男</React.UI.Radio>
                            <React.UI.Radio value='2'>女</React.UI.Radio>
                        </React.UI.Space>
                    </React.UI.Radio.Group>
                </React.UI.Form.Item>

                {/* 地区 */}
                <React.UI.Form.Item name="region_text" label="地区" onClick={() => SetAreaShow(true)}>
                    <React.UI.Input placeholder="请选择地区" readOnly  />
                </React.UI.Form.Item>




            </React.UI.Form>
        </>
    )
}